<template>
  <div>
    <div class = "card" style="margin-bottom: 5px;">
      <el-input style="width: 240px; margin-right: 10px" v-model="data.keyword" placeholder="请输入关键词查询" prefix-icon="Search"></el-input>
      <el-button type="primary" @click="load">查 询</el-button>
      <el-button type="warning" @click="reset">重 置</el-button>
    </div>
    <div class = "card" style="margin-bottom: 5px">
      <el-button type="warning" @click="deleteBatch">批 量 删 除</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-table :data="data.tableData" border stripe string @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column label="序号" prop = "id"></el-table-column>
        <el-table-column label="评论内容" prop = "content" show-overflow-tooltip></el-table-column>
        <el-table-column label="用户id" prop = "userId"></el-table-column>
        <el-table-column label="评论用户" prop = "name"></el-table-column>
        <el-table-column label="房间id" prop = "roomId"></el-table-column>
        <el-table-column label="房间名称" prop = "roomName"></el-table-column>
        <el-table-column label="评论时间" >
          <template #default="scope">
            {{ formatTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" prop = "name">
          <template #default="scope">
            <el-button type="danger"  :icon="Delete" circle @click="del(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-bottom: 15px">
        <el-pagination
            v-model:current-page="data.pageNum"
            v-model:page-size="data.pageSize"
            :page-sizes="[5,10,15,20]"
            backgroudr
            layout="total, sizes, prev, pager, next,jumper"
            :total="data.total"
        />
      </div>
    </div>

  </div>

</template>

<script setup>
import { reactive } from "vue";
import request from "../../utils/request";
import {Delete} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import dayjs from "dayjs";
const data = reactive({
  name:null,
  keyword:null,
  tableData:[],
  pageNum:1,
  pageSize:10,
  total:0
})

const load =()=>{

  request.get('/comment/SelectPage',{
    params:{
      pageNum:data.pageNum,
      pageSize:data.pageSize,
      keyword:data.keyword,
    },

  }).then(res=>{
    data.tableData = res.data.list
    data.total = res.data.total
  })
}
load()
const reset = ()=>{
  data.keyword = null
  load()
}

// 格式化时间
const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm');
};

const handleSelectionChange = (rows)=>{//返回选中所有的行
  //从选中的行数组里取出username组成一个新的数组ids
  data.ids = rows.map(row=>row.id)
  console.log(data.ids)
}

const del =(id)=>{
  ElMessageBox.confirm('确定要删除该评论吗？', '提示', {type: 'warning'}).then(()=>{

    request.delete('/comment/delete', {
      params:{
        id:id
      }
    }).then(res =>{
      if (res.code === '200'){
        ElMessage.success('操作成功')
        load()
      }else {
        ElMessage.error(res.msg)
      }
    })
  }).catch()
}

const deleteBatch = ()=>{
  if (data.ids.length === 0) {
    ElMessage.warning('请选择要删除的评论')
    return
  }
  ElMessageBox.confirm('确定要删除这些评论吗？', '提示', {type: 'warning'}).then(()=>{
    request.delete('/comment/deleteBatch', {data:data.ids}).then(res =>{
      if (res.code === '200'){
        ElMessage.success('操作成功')
        load()
      }else {
        ElMessage.error(res.msg)
      }
    })
  }).catch()
}

</script>